<template>
  <div class="afterInvestDel-page">
    <div class="nav flex-h-sb">
      <div class="nav-left flex">
        <div
          class="nav-item"
          :class="{ typePage: typePage == 1 }"
          @click="curNavHandle(1)"
        >
          组合分类分析
        </div>
        <div
          class="nav-item"
          :class="{ typePage: typePage == 2 }"
          @click="curNavHandle(2)"
        >
          组合策略分析
        </div>
      </div>
      <div class="nav-right flex-v-center">
        <span style="font-size: 14px; color: #606266; font-weight: 700">
          对比指标：
        </span>
        <indexSelectTree
          style="margin: 0 30px 0 10px"
          :indexType.sync="indexType"
          :maxNum="5"
          size="small"
          :clearable="false"
          @contrastOptionsObj="contrastOptionsObj"
          :width="300"
        ></indexSelectTree>
        <el-button size="small" type="primary" @click="saveParamsHandle">
          应用
        </el-button>
        <el-button size="small" @click="refresh">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
export default {
  components: {
    indexSelectTree,
  },
  data() {
    return {
      typePage: 1,
      contrastOptions_obj: {},
      indexType: [],
    };
  },
  props: {
    info: {
      type: Object | Array,
    },
    dataFrom: {
      type: Object | Array,
    },
    one_contrastOptions_list: {
      type: Object | Array,
    },
    contrastOptObj: {
      type: Object | Array,
    },
    navActive: {
      type: String | Number,
    },
  },
  watch: {
    "info.indexType": {
      handler(newVal, oldVal) {
        this.indexType = [newVal];
        this.$emit("update:dataFrom", [newVal]);
        this.setOneList();
      },
      deep: true,
    },
    typePage: {
      handler(newVal, oldVal) {
        this.$emit("update:navActive", newVal);
      },
      deep: true,
    },
    indexType: {
      handler(newVal, oldVal) {
        if (newVal.length > 5) {
          this.$message({
            message: "最多选择5个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.indexType = oldVal;
          });
        } else {
          this.setOneList();
          this.$emit("update:dataFrom", this.indexType);
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    curNavHandle(i) {
      this.typePage = i;
    },
    saveParamsHandle() {
      // this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj;
      // console.log("对比指标 - ", obj);
      this.$emit("update:contrastOptObj", obj);
      this.setOneList();
    },
    // changeIndexType() {
    //   if (this.indexType.length > 5) {
    //     this.$message({
    //       message: "最多选择5个对比指标",
    //       type: "warning",
    //       duration: 2000
    //     });
    //   } else {
    //     this.setOneList();
    //     console.log('vvvv', this.indexType);
    //     this.$emit("update:dataFrom", this.indexType);
    //   }
    // },
    setOneList() {
      if (
        Object.keys(this.contrastOptions_obj).length &&
        this.indexType.length
      ) {
        const oneList = [];
        this.indexType.forEach((item) => {
          oneList.push({
            id: item,
            name: this.contrastOptions_obj[item],
          });
        });
        // this.one_contrastOptions_list = oneList;
        // alert(oneList);
        this.$emit("update:one_contrastOptions_list", oneList);
        // if (oldVal) {
        // this.getIndexRiskByIndexTypeAndTime(newVal);
        // }
      }
    },
    refresh() {
      location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  .nav {
    height: 56px;
    margin-top: 20px;
    padding: 0 24px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .nav-left {
      font-size: 18px;
      font-weight: 400;
      color: #262626;
      .nav-item {
        font-family: PingFangSC-Regular, PingFang SC;
        cursor: pointer;
        line-height: 56px;
        & + .nav-item {
          margin-left: 48px;
        }
      }
    }
    .typePage {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
  }
}
</style>
